<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>用户登录</title>

        <!-- 新 Bootstrap4 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
        <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
        <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
        <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
        <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
        <!-- 移动设备优先 -->
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!--通用方法-->
        <script src="/static/js/baseJs/base.js"></script>
        <!--工具方法-->
        <script src="/static/js/baseJs/MD5.js"></script>
        <style type="text/css">
            /*背景*/
            body {
                background-image: url('/static/images/ToolIoc/tt0.top-704510.gif');
                background-repeat: repeat-x;
                background-size: 400px 900px;
            }

            .middle {
                margin-top: 110px;
                margin-bottom: 110px;
                padding: 100px 50px 50px 50px;
                background-color: white;
                border-radius: 15px;
                box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.1);

            }

            .login {
                margin-left: 20px;
            }

            .font2 {
                font-size: 0.6em;
            }

            .btn {
                border-radius: 28px;
            }

            .login .form-group .form-control-red {
                color: #495057 !important;
                background-color: #fff !important;
                border-color: #e99898 !important;
                outline: 0 !important;
                box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25) !important;
            }
        </style>


    </head>
    <body>
        <div class="container">
            <div class="middle mx-auto h-90 w-90" style="padding: 50px;margin-bottom: 50px">
                <div class="row">
                    <div class="col col-9 col-md-6">
                        <a style="color: #007bff;text-decoration:none;line-height: 5px" href="/myPage/info">
                            <img height="20" width="20" src="/static/images/ToolIoc/叉.png">
                        </a>
                    </div>
                    <div class="col col-3 col-md-6">
                        <a style="color: #007bff;text-decoration:none;line-height: 5px" href="/myPage/myregister">
                            <span>注册</span>
                        </a>
                    </div>
                    <div class="col col-12 col-md-6 ">
                        <img id="logo" style="margin-left: 0" class="rounded img-fluid"
                             src="/static/images/ToolIoc/星速外卖logo.png" alt="星速外卖">
                    </div>
                    <div class="col col-12 col-md-6">
                        <div class="login">
                            <h5 class="font-weight-bold">欢迎登录星速外卖</h5>
                            <p class="font-weight-light font2">关于吃的我们很专业</p>
                            <!--登录-->
                            <form>
                                <div class="form-group">
                                    <label for="logAccount" class="sr-only">用户名:</label>

                                    <input type="text" name="logAccount" class="form-control" id="logAccount"
                                           style="border-radius: 5px;"
                                           placeholder="用户名">
                                    <span id="username-span" style="color: red;font-size: 9px">

                                    </span>
                                </div>
                                <div class="form-group">
                                    <label for="logPassWord" class="sr-only">密码:</label>
                                    <input type="password" name="logPassWord" class="form-control" id="logPassWord"
                                           style="border-radius: 5px;"
                                           placeholder="密码">
                                    <span id="logPassWord-span" style="color: red;font-size: 9px">

                                    </span>
                                </div>
                                <!--<div class="xuan custom-control custom-checkbox">-->
                                <!--    <input type="checkbox" class="custom-control-input" id="customCheck"-->
                                <!--           name="example">-->
                                <!--    <label class="custom-control-label font-weight-light small"-->
                                <!--           for="customCheck">记住用户名</label>-->
                                <!--</div>-->
                                <button type="button" id="sub" class="btn  btn-primary btn-block w-75 mx-auto">登 录
                                </button>
                                <br>
                                <div style="text-align: center">
                                    <a href="/myPage/info">忘记密码</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(function () {
                var nameFlog;
                var logPassWordFlog;
                /*用户名*/
                $('#logAccount').blur(function () {
                    nameFlog = judge($(this), $('#username-span'), '用户名只能为2-6位', /^[\u4e00-\u9fa5_a-zA-Z0-9-]{2,6}$/g)
                })
                /*密码*/
                $('#logPassWord').blur(function () {
                    logPassWordFlog = judge($(this), $('#logPassWord-span'), '密码格式错误 最少6位', /^.{5,12}$/g);
                });
                $('#sub').click(function () {
                    subAjax();
                })

                /**
                 * 提交
                 */
                function subAjax() {
                    let logAccount = $("input[name='logAccount']");
                    let logPassWord = $("input[name='logPassWord']");
                    if (nameFlog === null || nameFlog === false) {
                        nameFlog = judge(logAccount, $('#username-span'), '用户名格式错误', /^[\u4e00-\u9fa5_a-zA-Z0-9-]{2,6}$/g)
                    } else if (logPassWordFlog == null || logPassWordFlog === false) {
                        logPassWordFlog = judge(logPassWord, $('#logPassWord-span'), '密码格式错误', /^[a-zA-Z][a-zA-Z0-9_.'#><+]{5,10}$/g);
                    } else {
                        $.ajax({
                            url: "/userLogin/login",
                            type: "POST",
                            dataType: "json",
                            data: {
                                logAccount: logAccount.val(),
                                logPassWord: hex_md5(logPassWord.val()),
                            },
                            success: function (res) {
                                if (res.code === 200) {
                                    //利用localstorage存储到本地 存储用户和token
                                    localStorage.setItem("token", res.data.token);
                                    //把对象转换为json字符串 读取时将字符串转换为对象
                                    localStorage.setItem("userLogin", JSON.stringify(res.data.userLogin));
                                    //转向主页面
                                    location = "/index/home";
                                } else {
                                    alert("用户名或者密码错误！");
                                }
                            },
                            error: function (err) {
                                console.log(err);
                            }
                        })
                    }
                }

                function left_right() {
                    $("#logo").animate({'marginLeft': '+=200'}, 5000, function () {
                        $('#logo').prop('src', '/static/images/ToolIoc/星速外卖logo返回.png');
                    });
                    $("#logo").animate({'marginLeft': '-=200'}, 5000, function () {
                        $('#logo').prop('src', '/static/images/ToolIoc/星速外卖logo.png');
                        setTimeout(left_right, 1000);
                    });
                }
                //图标位置
                left_right();
            })
        </script>
    </body>
</html>